<template>
    <div>

        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addVisibleRole">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="roleList"
                    border
                    stripe
            >
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-row :class="['bdbottom',i1===0 ? 'bdtop':'','vcenter' ]"
                                v-for="(item1 ,i1) in scope.row.children" :key="item1.id">
                            <el-col :span="5">
                                <!--                                一级权限-->
                                <el-tag closable
                                        @close="removeRightById(scope.row,item1.id)">{{item1.authName}}
                                </el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <!--                                二三级权限-->
                                <el-row :class="[i2===0 ?'': 'bdtop' ,'vcenter' ]" v-for="(item2,i2) in item1.children"
                                        :key="item2.id">
                                    <el-col :span="6">
                                        <!--                                二级权限-->
                                        <el-tag type="success" closable
                                                @close="removeRightById(scope.row,item2.id)">{{item2.authName}}
                                        </el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <!--                               三级权限-->
                                        <el-tag
                                                type="warning"
                                                v-for="(item3,i3) in item2.children"
                                                :key="item3.id"
                                                closable
                                                @close="removeRightById(scope.row,item3.id)"
                                        >{{item3.authName}}
                                        </el-tag>
                                    </el-col>

                                </el-row>

                            </el-col>
                        </el-row>

                    </template>


                </el-table-column>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column label='角色名称' prop="roleName"></el-table-column>
                <el-table-column label='角色描述' prop="roleDesc"></el-table-column>
                <el-table-column label='操作' width="300px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editRole(scope.row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRole(scope.row)">删除</el-button>
                        <el-button type="warning" icon="el-icon-setting" size="mini"  @click="getRight(scope.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-divider></el-divider>
<!--            添加角色-->

            <el-dialog
                    title="添加角色"
                    :visible.sync="addRole"
                    width="40%"
            >

                <el-form label-position="right" label-width="80px" :model="newRoleInfo" >
                    <el-form-item label="角色名称">
                        <el-input v-model="newRoleInfo.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述">
                        <el-input v-model="newRoleInfo.roleDesc"></el-input>
                    </el-form-item>
                </el-form>




                <span slot="footer" class="dialog-footer">
                    <el-button @click="addRole = false">取 消</el-button>
                    <el-button type="primary" @click="submitRole">确 定</el-button>
                </span>
            </el-dialog>
<!--编辑角色-->
            <el-dialog
                    title="编辑角色"
                    :visible.sync="editRoleVisible"
                    width="40%"
            >

                <el-form label-position="right" label-width="80px" :model="roleInfo" >
                    <el-form-item label="角色名称">
                        <el-input v-model="roleInfo.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述">
                        <el-input v-model="roleInfo.roleDesc"></el-input>
                    </el-form-item>
                </el-form>




                <span slot="footer" class="dialog-footer">
                    <el-button @click="editRoleVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitRoleInfo">确 定</el-button>
                </span>
            </el-dialog>





<!--            //权限分配-->
            <el-dialog
                    title="提示"
                    :visible.sync="rigthManage"
                    width="60%"
                   >
                <el-tree
                        :data="rightlist"
                        show-checkbox
                        node-key="id"
                        :default-checked-keys="defKeys"
                        default-expand-all
                        :props="treeProps"
                        ref="RightTree">
                </el-tree>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="rigthManage = false">取 消</el-button>
                    <el-button type="primary" @click="setRight">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>

    </div>
</template>

<script>
    import {Message} from 'element-ui'
    export default {
        name: "roles",
        data() {
            return {
                //添加角色
                addRole:false,
                newRoleInfo:{
                    roleName:"",
                    roleDesc:''
                },


                editRoleVisible:false,
                roleInfo:{
                    roleName:"",
                    roleDesc:''
                },
                editRoleId:'',







                roleList: [],
                rigthManage:false,
                rightlist:[],
                //绑定对象
                treeProps:{
                    label:'authName',
                    children:'children'
                },
                //默认选中的id值
                defKeys:[],
                roleid:''
            }
        },
        created() {
            this.getRolesList()
        }
        , methods: {
            //打开添加角色面板
            addVisibleRole(role){
                    this.roleName=role.name
                    this.addRole=true
            },
            //提交添加的角色
            async submitRole(){
                let {data:res}= await this.$http.post('roles',this.newRoleInfo)
                if (res.meta.status != 201) return Message.error(res.meta.msg)
                this.getRolesList()
                this.addRole=false
            },
            //编辑角色
            async submitRoleInfo(){
                let {data:res}= await this.$http.put(`roles/${this.editRoleId}`,this.roleInfo)
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.getRolesList()
                this.editRoleVisible=false
            },

            editRole(role){
                console.log(role);
                this.editRoleId=role.id
                this.roleInfo.roleName=role.roleName
                this.roleInfo.roleDesc=role.roleDesc
                this.editRoleVisible=true
            },


                    //删除角色
            async  deleteRole(role){

                let relust =await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>{
                    return err
                })

                if (relust==='confirm'){

                    let {data:res}= await this.$http.delete(`roles/${role.id}`)

                    if (res.meta.status != 200) return Message.error(res.meta.msg)
                    this.getRolesList()

                    if (res.meta.status != 200) {
                        return Message.error(res.meta.msg)
                    }
                    Message.success(res.meta.msg)

                }










            },



            async getRolesList() {
                let {data: res} = await this.$http.get('roles')
                if (res.meta.status != 200) return this.$message.error(res.meta.msg)
                this.roleList = res.data
                console.log('ddddddddddddddddddddddddddddddddddddddddddddddddddd');
                console.log(res.data);
            },
            //删除权限
            async removeRightById(roles, rightId) {
                let action = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => {
                    return err
                })
                if (action === 'cancel') return
                let {data: res} = await this.$http.delete(`roles/${roles.id}/rights/${rightId}`)
                if (res.meta.status != 200) return this.$message.error(res.meta.msg)
                //防止卡片关闭
                roles.children = res.data
            },

            async getRight(role){
                this.roleid=role.id
               let {data:res}=await this.$http.get('rights/tree')

                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.rightlist=res.data
                //递归获取三级
                this.getleafKeys(role,this.defKeys)
                this.rigthManage=true

            },
            //获取三级权限的id
            getleafKeys(node,arr){
                if (!node.children){
                    return arr.push(node.id)
                }
                node.children.forEach((item)=>{
                    this.getleafKeys(item,arr)
                })
            },

            //分配权限
            async setRight(){
                let  allright=[
                    ...this.$refs.RightTree.getHalfCheckedKeys(),
                        ...this.$refs.RightTree.getCheckedKeys()
                ]

                let idStr=allright.join(',')
                console.log(idStr)
                let {data:res}=await  this.$http.post(`roles/${this.roleid}/rights`,{rids:idStr})
                console.log('yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy')
                console.log(res)
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.$message.success(res.meta.msg)
                this.getRolesList()
                this.rigthManage=false;
                this.defKeys=[]
                let keys=[]
                this.rightlist=[]
            }
        }
    }
</script>

<style scoped>

</style>
